<template>
  <view>
    <view class="text-outer">
      <view
        class="message"
        v-for="(item, index) in list"
        :key="index"
        @click="tapclick(index)"
        :class="currentClass(index)"
      >
        <view class="text-group">
          <view class="text">{{ item.name }}</view>
        </view>
      </view>
    </view>
    <view class="question" v-for="(item, index) in content" :key="index">
      <view class="text-demo">{{ item.title }}</view>
      <view style="width: 100%">
        <video
          class="video"
          :id="'video'+index"
          @play="videoPlay(index)"
           :ref="'video'+index"
          :src="item.video"
          controls
          object-fit="cover"
		  :poster="item.videoImage"
        ></video>
      </view>
    </view>
  </view>
</template>

<script>
import md5 from "@/static/md5.js";
import videoList from "../videoList/videoList.vue";
export default {
  components: { videoList },
  data() {
    return {
      key: "521739CE5E82CBDF",
      list: [],
      signList: "",
      page: 0,
      currentNumber: 0,
      content: [],
      str: [],
      listKey: "1wqok8e4",
      listVideo: [],
      currentIndex:''
    };
  },
  onShow() {
    const bbb = `key=${this.key}`;
    const signList = md5(bbb);
    this.signList = signList;
    this.dealInfo();
	// console.log("onshow")
  },
  onHide(){
	  console.log(123)
    this.content = [];
  },
  methods: {
    getList() {
      const _this = this;
      return new Promise((resolve, reject) => {
        uni.request({
          // url: `http://qk-nv.buss.h5data.com/api/Channel/GetList?sign=${this.signList}`,
          url: `/api/api/Channel/GetList?sign=${this.signList}`,
          method: "GET",
          success: (res) => {
            this.list = res.data.Data;
            _this.getVideo();
            resolve("suc"); // 千万别忘写！！！
          },
          fail: (err) => {
            reject("err");
          },
        });
      });
    },

    getVideo() {
      const sign = md5(
        `ChannelId=${this.listKey}&limit=20&page=2&key=${this.key}`
      );
      return new Promise((resolve, reject) => {
        uni.request({
          // url: `http://qk-nv.buss.h5data.com/api/Message/GetList?ChannelId=${this.listKey}&limit=20&page=2&sign=${sign}`,
          url: `/api/api/Message/GetList?ChannelId=${this.listKey}&limit=20&page=2&sign=${sign}`,
          method: "GET",
          success: (res) => {
            this.content = res.data.Data.MFMessageDataItems;
            let content = uni.setStorageSync("content", this.content);

            resolve("suc");
          },
          fail: (err) => {
            reject("err");
          },
        });
      });
    },
    // currentInfo(index) {
    //     },
    currentClass(index) {
      return [this.currentNumber == index ? "active" : ""];
    },
    tapclick(index) {
      // this.debounce(this.navigate(params), 300);]
      this.listKey = this.list[index].id;
      this.getVideo();
      this.currentNumber = index;
    },

    currentClass(index) {
      return [this.currentNumber == index ? "active" : ""];
    },
    async dealInfo() {
      await this.getList();
      uni.setStorageSync("videoList", JSON.stringify(this.list));
    },
    videoPlay(index) {
      // let video = uni.createVideoContext("video" + index, this);
      // video.play();
      this.currentIndex=index
     let video = uni.createVideoContext("video[index]", this);
      video.play();
      // let video = uni.createVideoContext()
      for (var i = 0; i < this.content.length; i++) {
        if (i != index) {
          let video2 = uni.createVideoContext("video" + i, this);
          video2.pause();
        }
      }

    },
  },
};
</script>
<style lang="scss" scoped>
.text-outer::-webkit-scrollbar {
  display: none;
}
.text-outer {
  display: flex;
  width: 100%;
  height: 40px;
  line-height: 40px;
  white-space: nowrap;
  overflow-x: scroll;
  overflow-y: hidden;
  text-align: justify;
  padding-bottom: 30upx;
  .text {
    text-align: center;
    width: 100upx;
  }
  .active {
    color: red;
    border-bottom: 2px solid red;
  }
}
.question {
  width: 100%;
  // margin-left: 4%;
  // display: flex;
  // flex-wrap: wrap;
  // justify-content: center;
  margin-bottom: 52upx;
  .text-demo {
    margin-left: 4%;

    margin-bottom: 3%;
  }
  .video {
    width: 100%;
  }
}
</style>
